<template>
    <el-container>
        <el-main class="wrapper">
            <section class="panel cms-content">
                <div class="panel-body">
                    <el-form :model="form" ref="form" label-width="120px"
                             class="demo-ruleForm">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="封面图：" :rules="[{ required: true, message: '请上传项目封面图', trigger: 'change'}]" prop="thumb">
                                    <span style="color: #999;">上传的封面图比例为1:1 !!!</span>
                                    <el-upload
                                            class="index-project-uploader"
                                            :action="upload"
                                            :show-file-list="false"
                                            name="image"
                                            :on-success="uploadSuccess"
                                            :before-upload="uploadBefore">
                                        <img v-if="form.thumb" :src="form.thumb"
                                             class="index-project">
                                        <i v-else class="el-icon-plus index-project-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                                <el-form-item label="项目标题：" :rules="[{ required: true, message: '请填写项目标题', trigger: 'blur'}]" prop="title">
                                    <el-input v-model="form.title" placeholder="请填写项目标题"></el-input>
                                </el-form-item>
                                <el-form-item v-if="options.length" label="类目：" prop="cateid" :rules="[{ required: true, message: '请选择新闻类目', trigger: 'blur'}]">
                                    <el-cascader  change-on-select :options="options" v-model="form.cateid"></el-cascader>
                                </el-form-item>
                                <el-form-item label="项目简述：" :rules="[{ required: true, message: '请填写项目简述', trigger: 'blur'}]" prop="summary">
                                    <el-input v-model="form.summary" placeholder="请填写项目简述"></el-input>
                                </el-form-item>
                                <el-form-item label="项目说明：" :rules="[{ required: true, message: '请填写项目说明', trigger: 'blur'}]" prop="explain">
                                    <el-input v-model="form.explain" placeholder="请填写项目说明"></el-input>
                                </el-form-item>
                                <el-form-item label="上线时间：" :rules="[{ required: true, message: '请选择项目上线时间', trigger: 'blur'}]" prop="online">
                                    <el-date-picker
                                            v-model="form.online"
                                            type="date"
                                            placeholder="选择日期"
                                            format="yyyy 年 MM 月 dd 日"
                                            value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="项目简介：" :rules="[{ required: true, message: '请填写项目简介', trigger: 'blur'}]" prop="introduce">
                                    <el-input type="textarea" rows="5" v-model="form.introduce" placeholder="请填写项目简介"></el-input>
                                </el-form-item>
                                <el-form-item label="项目成员：" :rules="[{ required: true, message: '请填写项目成员', trigger: 'blur'}]" prop="member">
                                    <el-input type="textarea" rows="5" v-model="form.member" placeholder="请填写项目成员"></el-input>
                                </el-form-item>
                                <el-form-item label="项目亮点：" :rules="[{ required: true, message: '请填写项目亮点', trigger: 'blur'}]" prop="merit">
                                    <el-input type="textarea" rows="5" v-model="form.merit" placeholder="请填写项目亮点"></el-input>
                                </el-form-item>
                                <el-form-item label="应用场景：" :rules="[{ required: true, message: '请填写应用场景', trigger: 'blur'}]" prop="scene">
                                    <el-input type="textarea" rows="5" v-model="form.scene" placeholder="请填写应用场景"></el-input>
                                </el-form-item>
                                <el-form-item label="合作伙伴：" :rules="[{ required: true, message: '请填写合作伙伴', trigger: 'blur'}]" prop="partner">
                                    <el-input type="textarea" rows="5" v-model="form.partner" placeholder="请填写合作伙伴"></el-input>
                                </el-form-item>
                                <el-form-item label="交易平台：" :rules="[{ required: true, message: '请填写交易平台', trigger: 'blur'}]" prop="platform">
                                    <el-input type="textarea" rows="5" v-model="form.platform" placeholder="请填写交易平台"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="所在地区：" :rules="[{ required: true, message: '请填写项目所在地区', trigger: 'blur'}]" prop="region">
                                    <el-input v-model="form.region" placeholder="请填写项目所在地区"></el-input>
                                </el-form-item>
                                <el-form-item label="官方网站：" :rules="[{ required: true, message: '请填写官方网站', trigger: 'blur'}]" prop="home_link">
                                    <el-input v-model="form.home_link" placeholder="请填写官方网站"></el-input>
                                </el-form-item>
                                <el-form-item label="白皮书地址：" :rules="[{ required: true, message: '请填写白皮书地址', trigger: 'blur'}]" prop="white_link">
                                    <el-input v-model="form.white_link" placeholder="请填写白皮书地址"></el-input>
                                </el-form-item>
                                <el-form-item label="GitHub：" :rules="[{ required: true, message: '请填写GitHub地址', trigger: 'blur'}]" prop="github_link">
                                    <el-input v-model="form.github_link" placeholder="请填写GitHub地址"></el-input>
                                </el-form-item>
                                <el-form-item label="区块链浏览器：" :rules="[{ required: true, message: '请填写区块链浏览器地址', trigger: 'blur'}]" prop="chrome_link">
                                    <el-input v-model="form.chrome_link" placeholder="请填写区块链浏览器地址"></el-input>
                                </el-form-item>
                                <el-form-item  label="相关项目：" prop="about_project">
                                    <el-transfer
                                            filterable
                                            filter-placeholder="请输入相关项目名称"
                                            v-model="form.about_project"
                                            :data="projects">
                                    </el-transfer>
                                </el-form-item>
                                <el-form-item label="相关资讯：" prop="about_new">
                                    <el-transfer
                                            filterable
                                            filter-placeholder="请输入相关资讯名称"
                                            v-model="form.about_new"
                                            :data="news">
                                    </el-transfer>
                                </el-form-item>
                                <el-form-item label="状态：" prop="status">
                                    <el-radio-group v-model="form.status">
                                        <el-radio border :label="1">正常</el-radio>
                                        <el-radio border :label="2">待审核</el-radio>
                                        <el-radio border :label="3">未通过</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="推荐：" prop="position">
                                    <el-radio-group v-model="form.position">
                                        <el-radio border :label="1">正常</el-radio>
                                        <el-radio border :label="2">推荐</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <div>
                                    <el-button style="margin-left: 100px" type="primary" @click="update()">保存发布</el-button>
                                    <el-button style="float: right;margin-right: 100px" type="primary" @click="goback()">返回列表</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </section>
        </el-main>
    </el-container>
</template>
<script>
    import {mapGetters} from 'vuex';
    import {ProjectInfo,ProjectAll,ProjectUpdate,NewAll,CateList} from '@/utils/request';
    export default {
        data() {
            return {
                form: {
                    id: 0,
                    thumb: '',
                    title: '',
                    name: '',
                    cateid: [],
                    position: 1,
                    status: 1,
                    content: '',
                    region:'',
                    explain: '',
                    online: '',
                    home_link: '',
                    white_link: '',
                    github_link: '',
                    chrome_link:'',
                    introduce: '',
                    summary: '',
                    member: '',
                    merit: '',
                    scene: '',
                    partner: '',
                    platform:'',
                    about_project: [],
                    about_new: [],
                },
                options: [],
                projects: [],
                news: [],
            }
        },
        activated() {
            this.$store.dispatch('setActive', '/project');
            this.category();
            this.project();
            this.new();
            this.form = {
                id: 0,
                thumb: '',
                title: '',
                name: '',
                cateid: [],
                position: 1,
                status: 1,
                content: '',
                region:'',
                explain: '',
                online: '',
                summary: '',
                home_link: '',
                white_link: '',
                github_link: '',
                chrome_link:'',
                introduce: '',
                member: '',
                merit: '',
                scene: '',
                partner: '',
                platform:'',
                about_project: [],
                about_new: [],
            };
            if(this.$route.query.id){
                this.info(this.$route.query.id);
            }
        },
        computed: {
            ...mapGetters(['loading', 'upload']),
        },
        methods: {
            //所有项目
            project(){
                ProjectAll().then((res)=>{
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.projects = res.data;
                    }
                })
            },
            //所有新闻
            new(){
                NewAll().then((res)=>{
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.news = res.data;
                    }
                })
            },
            // 分类
            category(){
                CateList({params:{pid:1015}}).then((res)=>{
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.options = res.data;
                    }
                })
            },
            //上传封面
            uploadSuccess(res, file) {
                this.form.thumb = res.data.path;
            },
            uploadBefore(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传封面图片只能是 JPG | PNG | GIF格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传封面图片大小不能超过 2M!');
                }
                return isJPG && isLt2M;
            },
            info(id) {
                ProjectInfo({params: {id: id}}).then((res) => {
                    if(res.code){
                        this.$message.error(res.msg);
                    }else{
                        this.form = {
                            id: res.data.id,
                            thumb: res.data.thumb,
                            title: res.data.title,
                            name: res.data.name,
                            cateid: res.data.cateid,
                            summary: res.data.summary,
                            status: res.data.status,
                            content: res.data.content,
                            region:res.data.region,
                            explain: res.data.explain,
                            online: res.data.online,
                            home_link: res.data.home_link,
                            white_link: res.data.white_link,
                            github_link: res.data.github_link,
                            chrome_link:res.data.chrome_link,
                            introduce: res.data.introduce,
                            member: res.data.member,
                            merit: res.data.merit,
                            scene: res.data.scene,
                            partner: res.data.partner,
                            platform:res.data.platform,
                            about_project: res.data.about_project ? res.data.about_project : [],
                            about_new: res.data.about_new ? res.data.about_new : [],
                            position: res.data.position,
                        };
                    }
                });
            },
            goback() {
                this.$router.push({name: 'Project'})
            },
            //更新
            update() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        ProjectUpdate(this.form).then((response) => {
                            if (response.code) {
                                this.$message.error(response.msg);
                            } else {
                                this.$message({
                                    type: 'success',
                                    duration: '1000',
                                    message: response.msg,
                                    onClose: () => {
                                        this.$router.push({name: 'Project'})
                                    }
                                });
                            }
                        });
                    }
                });

            },
        },
    }
</script>
